<template>
  <el-form class="detail-info" label-width="130px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="父订单号:">
          <span>{{ orderInfo.parent_order_no }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="下单人ID:">
          <span>{{ orderInfo.user_id }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="下单人昵称:">
          <span>{{ orderInfo.user_nick }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="绑定手机号:">
          <span>{{ orderInfo.user_phone }}</span>
        </el-form-item>
      </el-col>
     <el-col :span="12">
        <el-form-item label="下载渠道:">
          <span>{{ orderInfo.channel_id | translateToName(channelOptions, 'channel_id', 'name') }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付入口:">
          <span>{{ orderInfo.pay_entry }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付方式:">
          <el-tag :type="orderInfo.pay_type === 2 ? 'success':orderInfo.pay_type === 2?'' :'info'"
            disable-transitions>{{ typeFormat(orderInfo) }}</el-tag>
        </el-form-item>
      </el-col>
     <el-col :span="12">
        <el-form-item label="订单名称:">
          <span>{{ orderInfo.product_name }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="订单金额:">
          <span>{{ orderInfo.pay_price | formatMoney}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="创建订单时间:">
          <span>{{ orderInfo.create_time }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="支付订单时间:">
          <span>{{ orderInfo.pay_time }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="取消订单时间:">
          <span>{{ orderInfo.expire_at }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="取消订单原因:">
          <span>{{ orderInfo.cancel_reason }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="状态:">
          <el-tag :type="orderStatus.get(orderInfo.status).tagType">{{ orderStatus.get(orderInfo.status).desc }}</el-tag>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import { getOrderStatus } from '@/constants/constant'
export default {
  name: 'OrderDetail',
  props: {
    orderInfo: {
      type: Object,
      require: true
    },
    payTypeOptions: {
      type: Array,
      default: () => []
    },
    channelOptions: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      orderStatus: undefined
    }
  },
  created () {
    this.orderStatus = getOrderStatus()
  },
  computed: {
  },
  methods: {
    // 支付方式内置字典翻译
    typeFormat (row, column) {
      return this.selectDictLabel(this.payTypeOptions, row.pay_type)
    }
  }
}
</script>
<style lang="scss" scoped>
  h5{
      line-height: 30px;
      font-size: 16px;
  }
</style>
